@import "src/styles/themes/mixin";

.themeMixin({
  :host {
    .row-selected {
      background-color: @primary-1;
    }

    .sidebar-logo {
      background: @primary-1;
      h1 {
        color: @text-color;
      }
    }

    .app-header {
      background: @layout-header-background;
    }

    .header-trigger {
      color: @text-color;
    }

    .inner-content {
      background: @layout-trigger-background;
    }

    .trigger:hover {
      color: #1890ff;
    }

    .top-file-menu {
      background-color: @normal-color;

      button:hover {
        background-color: @text-color-dark;
      }
    }

    nz-sider {
      .space-display {
        background-color: @component-background;
      }
    }
  }
});

:host {
  display: flex;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  .app-layout {
    height: 100vh;
    max-height: 100%;
    overflow-y: hidden;

    .menu-sidebar {
      position: relative;
      z-index: 10;
      //min-height: 100vh;
      box-shadow: 2px 0 6px rgba(0,21,41,.35);

      ::ng-deep .ant-menu-inline {
        border-right: none;
      }

      [nz-icon] {
        margin-right: 3px;
        font-size: 24px;
      }
    }
  }

  nz-header {
    padding: 0;
    width: 100%;
    z-index: 30;
    //box-shadow: 4px 0 6px rgba(0,21,41,.08);

    .top-file-menu {
      position: absolute;
      top: 0;
      height: 64px;
      width: 100%;
      padding: 0;
      border: none;
      z-index: 50;

      .menu-trigger {
        height: 64px;
        width: 64px;
      }

      .filename-trigger {
        height: 64px;
        font-weight: bolder;
      }
    }

    .app-header {
      position: relative;
      height: 64px;
      padding: 0;
      box-shadow: 0 4px 6px rgba(0,21,41,.35);

      .header-trigger {
        height: 64px;
        padding: 20px 24px;
        font-size: 20px;
        cursor: pointer;
        transition: all .3s,padding 0s;
      }

      .logo {
        font-weight: bolder;
      }

      .header-avatar {
        height: 64px;
        padding: 14px 24px;
        cursor: pointer;
        transition: all .3s, padding 0s;
      }

      .search-input-div {
        margin-left: 60px;
        width: 280px;
        height: 32px;
        padding: 16px;
        cursor: pointer;
        transition: all .3s, padding 0s;
      }
    }
  }

  nz-content {
    //margin: 24px;

    .inner-content {
      //padding: 24px;
      height: 100%;
    }
  }

  nz-sider {
    .space-display {
      height: 60px;
      border-top: #d9d9d9 2px;
      padding: 8px 15px;
      text-align: center;

      .db-icon {
        width: 30px;
        height: 100%;
        padding-top: 10px;
        padding-bottom: 10px;
        display: inline-block;
      }

      .space-progress {
        width: 85%;
        height: 100%;
        display: inline-block;
      }
    }
  }
}
